<style>
.vue-clipboard {
  margin-left: 5px;
  padding: 0px !important;
}
</style>
<template>
  <el-button type="text"
             icon="el-icon-document-copy"
             class="vue-clipboard"
             @click="copy"
             v-show="content != null &&content !== ''"
  >
  </el-button>
</template>

<script>

export default {
  name: "vue-clipboard",
  props: ['content'],
  components: {},
  data() {
    return {}
  },
  computed: {},
  created() {
  },
  methods: {
    copy() {
      this.$emit("event", "1", {});
      this.copyTextToClipboard(this.content);
      this.$notify({title: '提示', message: '复制完成', type: 'success'});
    },
    /**
     * 拷贝到剪贴板
     * @param text
     */
    copyTextToClipboard(text) {
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea');
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      textarea.setSelectionRange(0, textarea.value.length);
      document.execCommand('Copy');
      document.body.removeChild(textarea);
    }
  }
}
</script>
